<script setup>
import Product from '~/components/product/Product.vue'
import { getProducts, getProductsCategories } from '~/service/products'

const { locale } = useLocale()
const router = useRouter()
const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})

// definePageMeta({
//   title: t('products.title'),
// })

// const { $refreshAos } = useNuxtApp()
const current = ref()
const page = ref(1)
const pages = ref(0)
const products = ref([])

function onChange(v) {
  current.value = v
  page.value = 1
  pages.value = 0
  products.value = []
  getProductList()
}

const data = ref(null)
const loading = ref(false)
const productLoading = ref(false)

async function getProductList() {
  productLoading.value = true
  const data = await getProducts({ category_id: current.value, size: 8, page: page.value })
  products.value = [...products.value, ...data?.list] || []
  pages.value = data.pages
  productLoading.value = false
}
function listenBottomOut() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const clientHeight = document.documentElement.clientHeight
  const scrollHeight = document.documentElement.scrollHeight
  if (scrollTop + clientHeight + 200 >= scrollHeight) {
    if (!productLoading.value && (pages.value === 0 || page.value < pages.value)) {
      page.value = page.value + 1
      getProductList()
    }
  }
}

onMounted(async () => {
  loading.value = true
  data.value = await getProductsCategories({ size: 1000 })
  loading.value = false
  current.value = data.value?.list?.[0]?.id
  getProductList()
  window.addEventListener('scroll', listenBottomOut)
  useHead({
    title: `产品中心-超益钢业`,
  })
})

const catgs = computed(() => data.value?.list || [])

// const products = computed(() => catgs.value.find(c => c.id === current.value)?.products || [])
</script>

<template>
  <div>
    <div h="[700px] max-md:[200px]" class="flex items-center justify-between bg-[url(~/assets/img/product/banner_bc.png)] bg-cover bg-no-repeat uppercase">
      <!-- <h1 class="text-[46px] text-[#fff] max-md:text-[32px]">
        {{ $t('products.title') }}
      </h1>
      <h2 text=" [#ffffff33] [42px] max-md:[24px]">
        PRODUCT CENTER
      </h2> -->

      <img v-if="current === 3" src="@/assets/img/product/banner_left.png" alt="" class="ml-102px mt-40px h-400px max-md:ml-[10px] max-md:mt-[20px] max-md:h-[120px]" data-aos="fade-right">
      <img v-if="current === 3" src="@/assets/img/product/bikou_right.png" alt="" class="mr-92px mt-40px h-250px max-md:mr-[10px] max-md:mt-[20px] max-md:h-[100px]" data-aos="fade-left">
      <img v-if="current === 4" src="@/assets/img/product/banner_left.png" alt="" class="ml-102px mt-40px h-400px max-md:ml-[10px] max-md:mt-[20px] max-md:h-[120px]" data-aos="fade-right">
      <img v-if="current === 4" src="@/assets/img/product/kaikou_right.png" alt="" class="mr-92px mt-40px h-300px max-md:mr-[10px] max-md:mt-[20px] max-md:h-[120px]" data-aos="fade-left">
      <img v-if="current === 5" src="@/assets/img/product/banner_left.png" alt="" class="ml-102px mt-40px h-400px max-md:ml-[10px] max-md:mt-[20px] max-md:h-[120px]" data-aos="fade-right">
      <img v-if="current === 5" src="@/assets/img/product/louchengban_right.png" alt="" class="mt-40px h-400px max-md:mt-[20px] max-md:h-[120px]" data-aos="fade-left">
    </div>

    <div v-loading="loading" p="t-[32px] x-[94px] b-[90px] max-md:x-[var(--padding-x-wrap-md)] max-md:t-[8px] max-md:b-[48px]">
      <el-tabs v-model="current" @tab-change="onChange">
        <el-tab-pane v-for="catg in catgs" :key="catg.id" :name="catg.id" :label="get(catg, 'name', locale)">
          <div p="t-[50px] x-[76px] max-md:x-0 max-md:t-[24px]">
            <h3 class="title text-[34px] font-sans max-md:text-[18px]">
              {{ get(catg, 'name', locale) }}
            </h3>
          </div>
        </el-tab-pane>
      </el-tabs>
      <ul class="grid grid-cols-2 max-md:grid-cols-1" p="t-[32px] max-md:t-[16px]">
        <li v-for="product in products" :key="product.id" data-aos="fade-up" data-aos-delay="300" p="[40px] max-md:0" class="flex-1">
          <Product v-bind="product" @click="router.push(`/product/${product.id}`)" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.title::after {
  content: '';
  display: block;
  background: var(--primary-color);
  @apply w-[30px] h-[3px] max-md:w-[15px] max-md:h-[3px] max-md:mt-[4px];
}
</style>
